import Vue from 'vue/dist/vue.esm.browser'


window.vm = new Vue({
  el: '#app',
  data: {
    counter: 1,
    num: 2,
    obj: {
      name: '张三',
      age: 16
    },
    arr: ['a', 'c', 'b'],
    word: 'hello'
  },
  watch: {
    counter() {
      console.log('counter 数据发生了改变');
      // 异步代码
    }
  },
  computed: {
    compCounter() {
      console.log('counter 数据发生了改变');
      return this.counter * this.num
      // 不允许写异步代码
    }
  },
  filters: {
    capitalize(value) {
      return value.slice(0,1).toUpperCase() + value.slice(1)
    }
  }
})


vm.$watch('num', (newValue, oldValue) => {
  console.log(newValue, oldValue);
})

// vm.obj.sex = '男'
// 添加响应式数据
// vm.$set(对象, 属性, 值)
vm.$set(vm.obj, 'sex', '男')
// console.log(vm.obj);

// <标签 ref="h1" />
// vm.$refs.h1 就可以访问该节点


// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，
// 获取更新后的 DOM。 vm.$nextTick()
console.log(vm.$refs.h1.innerHTML)
vm.counter++
vm.$nextTick().then(() => {
  console.log(vm.$refs.h1.innerHTML)
})